import React from 'react';
import {Tooltip} from "antd";
import styles from '../../index.less';
import {BasicInfoArrayData} from "@/pages/customer/information/data";

export interface BasicInfoProps {
  [propName: string]: any;
}

const BasicInfo: React.FC<BasicInfoProps> = (props) => {
  const {customerInfo: {personalInfo=[], contactInfo=[], locationInfo=[]}} = props;
  return (
    <div>
      <div className={styles.info}>
        {personalInfo.map((item: BasicInfoArrayData) => (
          <div className={styles.personalInfo}>
            <div className={styles.rwsIconFont}>
              <Tooltip
                title={item.title}
                placement="top"
                overlayStyle={{fontSize: '12px'}}>
                <i className={`iconfont ${item.icon}`}/>
              </Tooltip>
            </div>
            {item.value || <div>-</div>}
          </div>
        ))}
      </div>
      <div className={styles.contact}>
        {contactInfo.map((item: BasicInfoArrayData) => (
          <div className={styles.personalInfo}>
            <div className={styles.rwsIconFont}>
              <Tooltip
                title={item.title}
                placement="top"
                overlayStyle={{fontSize: '12px'}}>
                <i className={`iconfont ${item.icon}`}/>
              </Tooltip>
            </div>
            {item.value || <div>-</div>}
          </div>
        ))}
      </div>
      <div className={styles.contactHotel}>
        {locationInfo.map((item: BasicInfoArrayData) => (
          <div className={styles.personalInfo}>
            <div className={styles.rwsIconFont}>
              <Tooltip
                title={item.title}
                placement="top"
                overlayStyle={{fontSize: '12px'}}>
                <i className={`iconfont ${item.icon}`}/>
              </Tooltip>
            </div>
            {item.value || <div>-</div>}
          </div>
        ))}
      </div>
    </div>
  );
};

export default BasicInfo;
